<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=edge, chrome=1">  
    <title>冠东微盘积分商城</title>
    <link href="${ctxPath}/js/layer/skin/layer.css" rel="stylesheet" />
    <link href="${ctxPath}/js/jquery-validation-1.13.1/form.css" rel="stylesheet" />
    <style>
			* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			
			body {
				background: #F7F7F7;
			}
			
			.form {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -185px;
				margin-top: -210px;
				height: 420px;
				width: 340px;
				font-size: 18px;
				-webkit-box-shadow: 0px 0px 10px #A6A6A6;
				background: #fff;
			}
			
			.border-btn {
				border-bottom: 1px solid #ccc;
			}
			
			#landing,
			#registered {
				float: left;
				text-align: center;
				width: 100%;
				padding: 15px 0;
				color: #545454;
			}
			
			#landing-content {
				clear: both;
			}
			
			.inp {
				height: 30px;
				margin: 0 auto;
				margin-bottom: 30px;
				width: 200px;
			}
			
			.inp>input {
				text-align: center;
				height: 30px;
				width: 200px;
				margin: 0 auto;
				transition: all 0.3s ease-in-out;
			}
			
			.login {
				border: 1px solid #A6A6A6;
				color: #a6a6a6;
				height: 30px;
				width: 202px;
				text-align: center;
				font-size: 13.333333px;
				margin-left: 70px;
				line-height: 30px;
				margin-top: 30px;
				transition: all 0.3s ease-in-out;
			}
			
			.login:hover {
				background: #A6A6A6;
				color: #fff;
			}
			
			#bottom {
				margin-top: 30px;
				font-size: 13.333333px;
				color: #a6a6a6;
			}
			
			#registeredtxt {
				float: left;
				margin-left: 80px;
			}
			
			#forgotpassword {
				float: right;
				margin-right: 80px;
			}
			
			#photo {
				border-radius: 80px;
				border: 1px solid #ccc;
				height: 80px;
				width: 80px;
				margin: 0 auto;
				overflow: hidden;
				clear: both;
				margin-top: 30px;
				margin-bottom: 30px;
			}
			
			#photo>img:hover {
				-webkit-transform: rotateZ(360deg);
				-moz-transform: rotateZ(360deg);
				-o-transform: rotateZ(360deg);
				-ms-transform: rotateZ(360deg);
				transform: rotateZ(360deg);
			}
			
			#photo>img {
				height: 80px;
				width: 80px;
				-webkit-background-size: 220px 220px;
				border-radius: 60px;
				-webkit-transition: -webkit-transform 1s linear;
				-moz-transition: -moz-transform 1s linear;
				-o-transition: -o-transform 1s linear;
				-ms-transition: -ms-transform 1s linear;
			}
			#registered-content {
				margin-top: 40px;
				display: none;
			}
			.fix {
				clear: both;
			}
			.form{
				display: none;
			}
			.tips{
				font-size:12px;
				color:red;
				text-align:center;
				height:10px;
				line-height:10px;
				margin:0px;
				padding:0px;
				position:relative;
				top:20px;
				display:none;
			}
			
		</style>
		
		<script type="text/javascript" src="${ctxPath}/js/jquery-1.10.2.min.js"></script>
    	<script type="text/javascript" src="${ctxPath}/js/jquery-validation-1.13.1/jquery.validate.min.js"></script>
		<script type="text/javascript" src="${ctxPath}/js/jquery-validation-1.13.1/localization/messages_zh.js"></script>
		<script type="text/javascript" src="${ctxPath}/js/jquery-validation-1.13.1/additional-methods.min.js"></script>
		<script type="text/javascript" src="${ctxPath}/js/jquery-validation-1.13.1/jquery-validate-extend.js"></script>
		
		<script type="text/javascript" src="${ctxPath}/point/users/login_register.js"></script>
    	<script type="text/javascript" src="${ctxPath}/js/RSA.js"></script>
    	
    	<script type="text/javascript">
    		
    		
    		$(function(){
    			//绑定提交表单事件
    			$("#myform").submit(function(){
    				if($("#myform").valid()==true){
    					loginSubmit();	
    				}
    				return false;
    			});
    			
    			$("#myform").validate();
    		});
    		
    		function login(){
    			$("#myform").submit();
    		}
    		
    		//加密
    		function encrypt(pwd){
    			RSAUtils.setMaxDigits(200);
    			var key = new RSAUtils.getKeyPair("${publicKeyExponent}", "", "${publicKeyModulus}");  
    			var encrypedPwd = RSAUtils.encryptedString(key,pwd.split("").reverse().join("")); 
    			return encrypedPwd;
    		}
    		
    		function loginSubmit(){
    		
    			$.ajax({
    				type : 'post',
    				url : "member/memberAP.do",
    				data :{
    					'account':$("#account").val(),
    					'password':encrypt($("#password").val())
    				},
    				dataType : 'json',
    				success : function(data){
    					/* alert(JSON.stringify(data));*/
    					if(data.resultMsg==1){
    						window.location.href="${servurl}/index.do";
    					}else{
    						$("#tips_3").show();
    					}
    				}
    			});
    			return false;
    		}
    		
    	</script> 
</head>
<body>  

	    <form class="form" id="myform"> 
			<div id="landing">冠东积分商城</div>
			<!-- <div id="registered">注册</div> -->
			<div class="fix"></div>
			<div id="landing-content">
				<div id="photo"><img src="imges/photo.png" /></div>
				<div class="inp"><input type="text" id="account" name="account" required/></div>
				<div class="inp"><input type="password" id="password" name="password" required/>
				<!-- <div class="tips">登录失败</div> --> 
				</div>
				
				<div onclick="login()" class="login">登录</div> 
				<div class="tips" id="tips_3">登录失败</div>
				<!-- <div id="bottom"><span id="registeredtxt">立即注册</span><span id="forgotpassword">忘记密码</span></div> -->
			</div>
			<!-- <div id="registered-content">
				<div class="inp"><input type="text" placeholder="请输入用户名" /></div>
				<div class="inp"><input type="password" placeholder="请输入密码" /></div>
				<div class="inp"><input type="password" placeholder="请再次输入密码" /></div>
				<div class="inp"><input type="text" placeholder="手机号码" /></div>
				<div class="login">立即注册</div>
			</div> -->
		</form>
		
</body>
</html>